<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">

		<title>选课系统-学生-选课列表</title>

		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
		<!-- Custom styles for this template -->
		<link th:href="@{/css/dashboard.css}" rel="stylesheet">

		<script th:src="@{/js/bootstrap.min.js}"></script>
		<script type="text/javascript" th:src="@{/js/jquery-3.2.1.js}"></script>
		<script type="text/javascript">

			function queryCourseIf(pageNum){
				$.ajax({
					type: "POST",
					url:"/stu/queryCourseIf",
					data:{'queryCondition':$("#queryCondition").val(),'collegeId':$("#collegeId").val(),'pageNum':pageNum},
					success:function (data) {
						var tBody=$("#CourseList");
						tBody.empty();//清空tbody中原有内容
						data.list.forEach((cou)=>{
							tBody.append(
									`<tr>
										<td>${cou.courseId}</td>
										<td>${cou.courseName}</td>
										<td>${cou.collegeName}</td>
										<td>${cou.teacherName}</td>
										<td>${cou.courseScore}</td>
										<td>${cou.description}</td>
										<td>${cou.schedule}</td>
										<td>${cou.stock}</td>
										<td>
											<a class="btn btn-sm btn-success"
											   onclick="selectCourse(${cou.courseId})"
											   href="#">选择</a>
										</td>
									</tr>`
							);
						});
						var paging=$("#paging");
						paging.empty();
						paging.append(
							`<ul class="paging">
								<li><a onclick="queryCourseIf(${1})" href="#">首页</a></li>
								<li><a onclick="queryCourseIf(${data.hasPreviousPage? data.pageNum-1 : data.pageNum})" href="#">上一页</a></li>
								<li><a>当前${data.pageNum}页 共${data.navigateLastPage}页</a></li>
								<li><a onclick="queryCourseIf(${data.hasNextPage? data.pageNum+1 : data.pageNum})" href="#">下一页</a></li>
								<li><a onclick="queryCourseIf(${data.navigateLastPage})" href="#">末页</a></li>
							</ul>`
						);


					},
					error : function(e){
						console.log(e.status);
						console.log(e.responseText);
					}
				});
			}


			function selectCourse(courseId){
				$.ajax({
					type: "POST",
					url:"/stu/selectCourse",
					data:{'courseId':courseId},
					success:function (data) {
						alert(data);
					},
					error : function(e){
						console.log(e.status);
						console.log(e.responseText);
					}
				});
			}


			function countDown() {
				var remainSeconds=$("#remainSeconds").val();
				var selectState=$("#selectState").val();
				//console.log(remainSeconds);
				var timeout;
				//选课尚未开始
				if (selectState == 0){
					if(remainSeconds>0){
						timeout=setTimeout(function () {
							$("#countDown").text(remainSeconds-1);
							$("#remainSeconds").val(remainSeconds-1);
							countDown();
						},1000);
						//选课进行中
					}else if(remainSeconds == 0){
						if(timeout){
							//如果timeout存在，则清除倒计时显示
							clearTimeout(timeout);
						}
						$("#selectTip").html("选课进行中")
					}
				}

			}




			$(function () {
				countDown();
			});


		</script>


	</head>

	<body>
	<div th:replace="~{commons::topbar}"></div>

		<div class="container-fluid">
			<div class="row">
				<div th:replace="~{commons::sidebar(active='select')}"></div>

				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">


					<div id="selectTip">
						<input type="hidden" id="remainSeconds" th:value="${remainSeconds}">
						<input type="hidden" id="selectState" th:value="${selectState}">
						<span th:if="${selectState eq -1}">选课不存在</span>
						<span th:if="${selectState eq 0}">选课倒计时:<span id="countDown" th:text="${remainSeconds}"/>秒</span>
						<span th:if="${selectState eq 1}">选课已开始</span>
						<span th:if="${selectState eq 2}">选课已结束</span>
					</div>

					<div>
						请输入课程id或课程名称
						<input type="text" class="search-control" id="queryCondition" placeholder="请输入课程id或课程名称" onchange="queryCourseIf(1)">
						开课学院：
						<select class="search-control" id="collegeId" onchange="queryCourseIf(1)">
							<option  value="0" selected="selected">...</option>   <!--所有学院-->
							<option th:each="college:${colleges}" th:text="${college.getCollegeName()}" th:value="${college.getCollegeId()}"></option>
						</select>
					</div>

					<br>
					<div class="table-responsive">
						<table class="table table-striped table-sm">
							<thead>
								<tr>
									<th>课程id</th>
									<th>课程名称</th>
									<th>开课学院</th>
									<th>开课老师</th>
									<th>学分</th>
									<th>课程详情</th>
									<th>开课时间</th>
									<th>课程人数</th>
									<th>操作</th>

								</tr>
							</thead>
							<tbody id="CourseList">
								<tr th:each="cou:${courses.getList()}">
									<td th:text="${cou.getCourseId()}"></td>
									<td th:text="${cou.getCourseName()}"></td>
									<td th:text="${cou.getCollegeName()}"></td>
									<td th:text="${cou.getTeacherName()}"></td>
									<td th:text="${cou.getCourseScore()}"></td>
									<td th:text="${cou.getDescription()}"></td>
									<td th:text="${cou.getSchedule()}"></td>
									<td th:text="${cou.getStock()}"></td>
									<td>
										<a class="btn btn-sm btn-success" th:href="|javascript:selectCourse(${cou.getCourseId()})|">选择</a>
									</td>

								</tr>
							</tbody>
						</table>
					</div>
					<div id="paging">
						<ul class="paging"  >
							<li><a th:href="|javascript:queryCourseIf(1)|">首页</a></li>
							<li><a th:href="|javascript:queryCourseIf(${courses.hasPreviousPage? courses.pageNum-1 : courses.pageNum})|">上一页</a></li>
							<li><a>当前[[${courses.pageNum}]]页 共[[${courses.navigateLastPage}]]页</a></li>
							<li><a th:href="|javascript:queryCourseIf(${courses.hasNextPage? courses.pageNum+1 : courses.pageNum})|">下一页</a></li>
							<li><a th:href="|javascript:queryCourseIf(${courses.navigateLastPage})|">末页</a></li>
						</ul>
					</div>
				</main>
			</div>
		</div>

	</body>

</html>